<template>
  <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" :inline="true">
      <el-form-item label="用户id：">
        <el-input v-model="queryParam.userId"></el-input>
      </el-form-item>
      <el-form-item label="用户名：">
        <el-input v-model="queryParam.userName"></el-input>
      </el-form-item>
      <el-form-item label="群组id：">
        <el-input v-model="queryParam.groupId"></el-input>
      </el-form-item>
      <el-form-item label="群组名称：">
        <el-input v-model="queryParam.groupName"></el-input>
      </el-form-item>
      <el-form-item label="身份：">
        <el-select v-model="queryParam.role" placeholder="请选择身份">
          <el-option label="老师" :value="3"></el-option>
          <el-option label="学生" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
        <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
          发送消息
        </el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="listLoading" :data="tableData" @selection-change="handleSelectionChange"> border fit
      highlight-current-row style="width: 100%">
      //单选框
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="userId" label="Id" />
      <el-table-column prop="userName" label="用户名" />
      <el-table-column prop="realName" label="真实姓名" />
      <el-table-column prop="groupId" label="群组id" />
      <el-table-column prop="groupName" label="群组名称" />
      <el-table-column prop="role" label="身份">
        <template #default="{ row }">
          <span v-if="row.role === 1">学生</span>
          <span v-if="row.role === 3">老师</span>
        </template>
      </el-table-column>
      <el-table-column prop="userLevel" label="学级" :formatter="levelFormatter" />
      <el-table-column prop="sex" label="性别" width="60px;" :formatter="sexFormatter" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="targetUniversity" label="目标院校" />
      <el-table-column prop="targetMajor" label="目标专业" />
      <el-table-column label="状态" prop="status" width="70px">
        <template slot-scope="{row}">
          <el-tag :type="statusTagFormatter(row.status)">
            {{ statusFormatter(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
      @pagination="search" />
    <el-drawer title="我是标题" :visible.sync="drawer" size="60%"  >
      <div style="margin-left: 20px">
        <el-table v-loading="listLoading" :data="filteredTableData"> border fit highlight-current-row style="width:
          100%">
          <el-table-column prop="userId" label="Id" />
          <el-table-column prop="userName" label="用户名" />
          <el-table-column prop="groupId" label="群组id" />
          <el-table-column prop="groupName" label="群组名称" />
          <el-table-column prop="role" label="身份">
            <template #default="{ row }">
              <span v-if="row.role === 1">学生</span>
              <span v-if="row.role === 3">老师</span>
            </template>
          </el-table-column>
          <el-table-column prop="userLevel" label="学级" :formatter="levelFormatter" />
          <el-table-column prop="sex" label="性别" width="60px;" :formatter="sexFormatter" />
          <el-table-column prop="phone" label="手机号" />
          <el-table-column prop="targetUniversity" label="目标院校" />
          <el-table-column prop="targetMajor" label="目标专业" />
        </el-table>
      </div>
      <el-form style="margin-left: 20px;margin-top: 20px" :model="massageFind" ref="queryForm" :inline="true">

        <el-form-item label="请选择消息类型：">
          <el-select v-model="massageFind.record.informType" placeholder="请选择消息类型" clearable style="width: 180px;" @change="changeInfoType">
            <el-option v-for="item in informType" :key="item.id" :value="item.id" :label="item.categoryName">
            </el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label="请输入消息内容：" v-if="contentShow">
          <el-input v-model="massageFind.record.content" style="width: 400%;"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="请选择周测科目：" v-if="subjectShow">
          <el-select v-model="subject" placeholder="学科"  clearable style="width: 80px;" >
            <el-option v-for="item in subjects" :key="item[0]" :value="item.id" :label="item.categoryName"></el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label="请输入试卷编号：" v-if="paperIdShow">
          <el-input v-model="paperId" ></el-input>
        </el-form-item>
        <br />
        <el-popover placement="top" width="300" v-model="visible">
          <p>请选择发送的对象：</p>
          <div>
            <el-button type="primary" @click="SendToSelectedMember(2)" style="margin-bottom: 18px">发送给选中成员</el-button>
            <br />
            <el-button type="primary" @click="SendToSelectedMember(3)" style="margin-bottom: 18px">发送给全部学生</el-button>
            <br />
            <el-button type="primary" @click="SendToSelectedMember(4)" style="margin-bottom: 18px">发送给全部老师</el-button>
            <br />
            <el-button type="primary" @click="SendToSelectedMember(0)" style="margin-bottom: 18px">发送给全部成员</el-button>
            <br />
          </div>
          <el-button type="primary" slot="reference">发送消息</el-button>
        </el-popover>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
  import {
    mapGetters,
    mapState
  } from 'vuex'
  import Pagination from '@/components/Pagination'
  import informApi from '@/api/inform'
  import subjectApi from '@/api/subject'
  /**
   * 用户管理 - 学生列表组件
   */
  export default {
    // 注册分页组件
    components: {
      Pagination
    },
    data() {
      // 返回一个对象，包含查询参数、列表加载状态、表格数据和总条数
      return {
        subjectShow: false,
        paperIdShow:false,
        contentShow:true,
        visible: false,
        // 查询参数对象，包含用户名、角色、页码和每页条数
        queryParam: {
          userId: null,
          userName: '',
          groupId: null,
          groupName: null,
          role: null,
          pageIndex: 1,
          pageSize: 10
        },
        massageFind: {
          record: {
            content: '',
            informType: null,
          },
          uids: [],
          isAll: null
        },
        informType: null,
        subjects:[],
        userList: [],
        // 列表加载状态，初始值为 true
        listLoading: true,
        // 表格数据，初始值为空数组
        tableData: [],
        // 总条数，初始值为 0
        total: 0,
        drawer: false,
        type: null,
        subject: null,
        paperId:null
      }
    },
    created() {
      // 在组件创建时调用 search 方法，初始化表格数据
      this.search()
      this.sendInform()
      this.searchSubject()
    },
    methods: {
      changeInfoType(){
        console.log(this.massageFind.record.informType)
        if(this.massageFind.record.informType==91){
          this.contentShow=false
          this.subjectShow=true
          this.paperIdShow=true
        }else{
          this.contentShow=!false
          this.subjectShow=!true
          this.paperIdShow=!true
        }
      },
      SendToSelectedMember(type) {
        this.loading = true
        if (type === 2) {
          if (this.userList === null || this.userList === undefined || this.userList.length === 0) {
            this.$message.error('请选择要发送的对象')
            return
          }
        }
        if (this.massageFind.record.informType === null || this.massageFind.record.informType === undefined || this
          .massageFind.record.informType === '') {
          this.$message.error('请选择消息类型')
          return
        }
        if(this.massageFind.record.informType==91){
          if (this.subject === null || this.subject === undefined || this.subject === '') {
            this.$message.error('请选择周测科目')
            return
          }
          if (this.paperId === null || this.paperId === undefined || this.paperId === '') {
            this.$message.error('请填写试卷编号')
            return
          }
          if(this.subject ==1){
            this.massageFind.record.content =`英语周测：<a href ='/english/weekTestExam?examPaperId=${this.paperId}'>跳转地址</a>`
          }else if(this.subject ==2){
            this.massageFind.record.content =`政治周测：<a href ='/politics/weekTest/practice?examPaperId=${this.paperId}'>跳转地址</a>`
          }else if(this.subject==3){
            this.massageFind.record.content =`数学周测：<a href ='/math/weekTest/practice?examPaperId=${this.paperId}'>跳转地址</a>`
          }
        }
        if (this.massageFind.record.content === null || this.massageFind.record.content === undefined || this
          .massageFind.record.content === '') {
          this.$message.error('请输入消息内容')
          return
        }

        this.massageFind.isAll = type
        this.massageFind.uids = this.userList
        informApi.findInfos(this.massageFind).then(({
          code,
          message
        }) => {
          if (code === 1) {
            this.$message.success('发送成功')
            this.drawer = false
            this.visible = false
          } else {
            this.$message.error('发送失败:' + message)
          }
        })
        this.loading = false
      },
      handleSelectionChange(rows) {
        this.userList = rows.map(row => row.userId)
        console.log(this.userList)
      },
      /**
       * 搜索方法，用于根据查询参数获取用户列表数据
       */
      search() {
        // 设置列表加载状态为 true
        this.listLoading = true
        // 判断queryParam.userId在有值的时候是否是数字
        if (this.queryParam.userId && isNaN(this.queryParam.userId)) {
          this.$message.error('用户id必须是数字')
          this.listLoading = false
          return
        }
        if (this.queryParam.groupId && isNaN(this.queryParam.groupId)) {
          this.$message.error('群组id必须是数字')
          this.listLoading = false
          return
        }
        // 调用 userApi.getUserPageList 方法，传入查询参数
        informApi.selectUsersGroup(this.queryParam).then(data => {
          // 获取响应数据
          const re = data.response
          // 将表格数据设置为响应数据中的列表
          this.tableData = re.list
          // 设置总条数为响应数据中的总条数
          this.total = re.total
          // 设置当前页码为响应数据中的页码
          this.queryParam.pageIndex = re.pageNum
          // 设置列表加载状态为 false
          this.listLoading = false
        })
      },
      sendInform() {
        this.listLoading = true
        informApi.selectAllInformType().then(data => {
          this.informType = data.response
          this.listLoading = false
        })
      },
      searchSubject(){
        subjectApi.selectLevel1().then(data=>{
          this.subjects=data.response
        })
      },
      /**
       * 提交表单方法，用于触发搜索
       */
      submitForm() {
        // 设置当前页码为 1
        this.queryParam.pageIndex = 1
        // 调用搜索方法
        this.search()
      },
      /**
       * 格式化枚举值方法
       * @param {Object} enumObj - 枚举对象
       * @param {Number} value - 要格式化的值
       * @returns {String} - 格式化后的字符串
       */
      enumFormat(enumObj, value) {
        // 遍历枚举对象
        for (const key in enumObj) {
          // 如果枚举对象的键值等于要格式化的值
          if (enumObj[key] === value) {
            // 返回枚举对象的键
            return key
          }
        }
        // 如果没有找到匹配的值，返回空字符串
        return ''
      },
      /**
       * 格式化用户级别方法
       * @param {Object} row - 表格行数据
       * @param {Object} column - 表格列数据
       * @param {Number} cellValue - 单元格值
       * @param {Number} index - 单元格索引
       * @returns {String} - 格式化后的字符串
       */
      levelFormatter(row, column, cellValue, index) {
        // 调用 enumFormat 方法，传入级别枚举对象和单元格值
        return this.enumFormat(this.levelEnum, cellValue)
      },
      /**
       * 格式化用户性别方法
       * @param {Object} row - 表格行数据
       * @param {Object} column - 表格列数据
       * @param {Number} cellValue - 单元格值
       * @param {Number} index - 单元格索引
       * @returns {String} - 格式化后的字符串
       */
      sexFormatter(row, column, cellValue, index) {
        // 调用 enumFormat 方法，传入性别枚举对象和单元格值
        return this.enumFormat(this.sexEnum, cellValue)
      },
      /**
       * 格式化用户状态方法
       * @param {Number} status - 用户状态值
       * @returns {String} - 格式化后的字符串
       */
      statusFormatter(status) {
        // 调用 enumFormat 方法，传入状态枚举对象和状态值
        return this.enumFormat(this.statusEnum, status)
      },
      /**
       * 格式化用户状态标签方法
       * @param {Number} status - 用户状态值
       * @returns {String} - 格式化后的字符串
       */
      statusTagFormatter(status) {
        // 调用 enumFormat 方法，传入状态标签枚举对象和状态值
        return this.enumFormat(this.statusTag, status)
      },
      /**
       * 格式化用户状态按钮方法
       * @param {Number} status - 用户状态值
       * @returns {String} - 格式化后的字符串
       */
      statusBtnFormatter(status) {
        // 调用 enumFormat 方法，传入状态按钮枚举对象和状态值
        return this.enumFormat(this.statusBtn, status)
      }
    },
    computed: {
      filteredTableData() {
        return this.tableData.filter(item =>
          this.userList.some(user => user === item.userId)
        )
      },
      // 使用 mapGetters 辅助函数映射获取 vuex 中的 enumFormat 方法
      ...mapGetters('enumItem', [
        'enumFormat'
      ]),
      // 使用 mapState 辅助函数映射获取 vuex 中的枚举对象
      ...mapState('enumItem', {
        // 用户性别枚举对象
        sexEnum: state => state.user.sexEnum,
        // 用户状态枚举对象
        statusEnum: state => state.user.statusEnum,
        // 用户状态标签枚举对象
        statusTag: state => state.user.statusTag,
        // 用户状态按钮枚举对象
        statusBtn: state => state.user.statusBtn,
        // 用户级别枚举对象
        levelEnum: state => state.user.levelEnum
      })
    }
  }
</script>
